<template lang="html">
  <div class="component_circle_box">
      <div class="component_circle_bg1"></div>
      <div class="component_circle_bg2"></div>
      <div class="component_circle_pr1" :style="{'transform':'rotate(-'+rotateDeg1+'deg)'}"></div>
      <div :class="['component_circle_pr2',classN?'component_circle_pr2_width':'']" :style="{'transform':'rotate('+rotateDeg2+'deg)'}"></div>
      <div class="component_circle_content">{{perCent}}%</div>
  </div>
</template>

<script>
export default {
  props: ['perCent'],
  computed:{
    rotateDeg1(){
      if(this.perCent > 50){
        return 0;
      }else{
        return 180-(this.perCent * 3.6);
      }
    },
    rotateDeg2(){
      if(this.perCent > 50){
        return (this.perCent - 50)* 3.6;
      }else{
        return 0;
      }
    },
    classN(){
      return (this.perCent > 50)?true:false;
    }
  },

}
</script>

<style lang="css" scoped>
.component_circle_box{
  position: relative;
  width: 60px;
  height: 60px;
}
.component_circle_content {
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
  z-index: 5;
  font-size: 12px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.component_circle_bg1{
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 120px 0 0 120px;
  z-index: 3;
  background: #C6DFFF;
}
.component_circle_bg2{
  left: 30px;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 0px 120px 120px 0;
  z-index: 1;
  background: #C6DFFF;
}
.component_circle_pr1 {
  position: absolute;
  left: 30px;
  width: 30px;
  height: 60px;
  border-radius: 0px 120px 120px 0px;
  z-index: 2;
  background: #4196FF;
  transform: rotate(-180deg);
  transform-origin: 0px 30px;
  transition: all ease 0.3s;
}
.component_circle_pr2 {
  position: absolute;
  left: 30px;
  border-radius: 0px 120px 120px 0px;
  z-index: 4;
  background: #4196FF;
  transform: rotate(0deg);
  transform-origin: 0px 30px;
  transition: all ease 0.3s;
}
.component_circle_pr2_width{
  width: 30px;
  height: 60px;
}
</style>
